<template>
  <div class="punishment-execution">
    <!-- 面包屑导航 -->
    <div class="breadcrumb-nav">
      <a-breadcrumb>
        <a-breadcrumb-item>
          <router-link to="/judgment">地府审判系统</router-link>
        </a-breadcrumb-item>
        <a-breadcrumb-item>刑罚执行系统</a-breadcrumb-item>
      </a-breadcrumb>
    </div>

    <!-- 页面头部区域 -->
    <div class="page-header">
      <div class="header-content">
        <div class="page-title">刑罚执行系统</div>
        <div class="page-subtitle">刑罚类型管理 · 执行进度跟踪 · 刑期减免规则 · 特赦申请处理</div>
      </div>
      <div class="header-actions">
        <a-button type="primary" @click="showPunishmentConfig">
          <SettingOutlined />
          刑罚配置
        </a-button>
        <a-button @click="showPardonManagement">
          <GiftOutlined />
          特赦管理
        </a-button>
      </div>
    </div>

    <!-- 执行统计概览 -->
    <div class="stats-section">
      <a-row :gutter="[20, 20]">
        <a-col :xs="24" :sm="6">
          <div class="stat-card executing">
            <div class="stat-icon">⚡</div>
            <div class="stat-content">
              <div class="stat-value">{{ stats.executing }}</div>
              <div class="stat-label">执行中</div>
            </div>
          </div>
        </a-col>
        <a-col :xs="24" :sm="6">
          <div class="stat-card completed">
            <div class="stat-icon">✅</div>
            <div class="stat-content">
              <div class="stat-value">{{ stats.completed }}</div>
              <div class="stat-label">已完成</div>
            </div>
          </div>
        </a-col>
        <a-col :xs="24" :sm="6">
          <div class="stat-card pardoned">
            <div class="stat-icon">🎁</div>
            <div class="stat-content">
              <div class="stat-value">{{ stats.pardoned }}</div>
              <div class="stat-label">获得特赦</div>
            </div>
          </div>
        </a-col>
        <a-col :xs="24" :sm="6">
          <div class="stat-card pending">
            <div class="stat-icon">⏳</div>
            <div class="stat-content">
              <div class="stat-value">{{ stats.pending }}</div>
              <div class="stat-label">等待执行</div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <a-row :gutter="[24, 24]">
        <!-- 左侧执行管理 -->
        <a-col :xs="24" :lg="16">
          <!-- 刑罚类型管理 -->
          <div class="section-wrapper">
            <div class="section-header">
              <h3 class="section-title">
                <ThunderboltOutlined class="section-icon" />
                刑罚类型管理
              </h3>
              <a-button type="link" @click="addPunishmentType">添加类型</a-button>
            </div>

            <div class="punishment-types">
              <a-row :gutter="[16, 16]">
                <a-col :xs="24" :md="12" :lg="8" v-for="type in punishmentTypes" :key="type.id">
                  <div class="type-card" :class="type.severity">
                    <div class="type-header">
                      <div class="type-name">{{ type.name }}</div>
                      <div class="type-level">{{ type.level }}</div>
                    </div>
                    <div class="type-description">{{ type.description }}</div>
                    <div class="type-stats">
                      <div class="stat-item">
                        <span>执行中: {{ type.executing }}</span>
                        <span>完成: {{ type.completed }}</span>
                      </div>
                      <div class="stat-item">
                        <span>平均刑期: {{ type.avgDuration }}</span>
                      </div>
                    </div>
                    <div class="type-actions">
                      <a-button type="text" size="small" @click="editPunishmentType(type)"> 编辑 </a-button>
                      <a-button type="text" size="small" @click="viewTypeDetails(type)"> 详情 </a-button>
                    </div>
                  </div>
                </a-col>
              </a-row>
            </div>
          </div>

          <!-- 执行进度跟踪 -->
          <div class="section-wrapper">
            <div class="section-header">
              <h3 class="section-title">
                <BarChartOutlined class="section-icon" />
                执行进度跟踪
              </h3>
              <div class="filter-controls">
                <a-select v-model:value="progressFilter" style="width: 120px">
                  <a-select-option value="">全部状态</a-select-option>
                  <a-select-option value="executing">执行中</a-select-option>
                  <a-select-option value="suspended">暂停</a-select-option>
                  <a-select-option value="completed">已完成</a-select-option>
                </a-select>
              </div>
            </div>

            <div class="execution-list">
              <div v-for="execution in filteredExecutions" :key="execution.id" class="execution-item">
                <div class="execution-header">
                  <div class="execution-info">
                    <div class="prisoner-name">{{ execution.prisonerName }}</div>
                    <div class="case-number">{{ execution.caseNumber }}</div>
                  </div>
                  <div class="execution-status">
                    <a-tag :color="getExecutionStatusColor(execution.status)">
                      {{ execution.statusText }}
                    </a-tag>
                  </div>
                </div>

                <div class="execution-details">
                  <div class="punishment-info">
                    <span class="punishment-type">{{ execution.punishmentType }}</span>
                    <span class="punishment-location">{{ execution.location }}</span>
                  </div>

                  <div class="progress-info">
                    <div class="progress-text">执行进度: {{ execution.completedDays }} / {{ execution.totalDays }} 天</div>
                    <a-progress :percent="execution.progressPercent" :strokeColor="getProgressColor(execution.progressPercent)" size="small" />
                  </div>

                  <div class="time-info">
                    <span>开始时间: {{ execution.startDate }}</span>
                    <span>预计结束: {{ execution.estimatedEnd }}</span>
                  </div>
                </div>

                <div class="execution-actions">
                  <a-button type="text" size="small" @click="viewExecutionDetail(execution)">
                    <EyeOutlined />
                    查看详情
                  </a-button>
                  <a-button type="text" size="small" @click="adjustExecution(execution)">
                    <EditOutlined />
                    调整刑期
                  </a-button>
                  <a-button type="text" size="small" @click="applyPardon(execution)" v-if="execution.canPardon">
                    <GiftOutlined />
                    申请特赦
                  </a-button>
                </div>
              </div>
            </div>
          </div>
        </a-col>

        <!-- 右侧管理面板 -->
        <a-col :xs="24" :lg="8">
          <!-- 特赦申请处理 -->
          <div class="section-wrapper">
            <div class="section-header">
              <h3 class="section-title">
                <GiftOutlined class="section-icon" />
                特赦申请处理
              </h3>
              <a-badge :count="pardonApplications.length" :offset="[10, 0]">
                <a-button type="link">查看全部</a-button>
              </a-badge>
            </div>

            <div class="pardon-list">
              <div v-for="pardon in pardonApplications" :key="pardon.id" class="pardon-item">
                <div class="pardon-header">
                  <div class="pardon-applicant">{{ pardon.applicantName }}</div>
                  <a-tag :color="getPardonStatusColor(pardon.status)">{{ pardon.status }}</a-tag>
                </div>
                <div class="pardon-content">
                  <div class="pardon-reason">申请理由: {{ pardon.reason }}</div>
                  <div class="pardon-type">特赦类型: {{ pardon.pardonType }}</div>
                  <div class="pardon-date">申请时间: {{ pardon.applicationDate }}</div>
                </div>
                <div class="pardon-actions">
                  <a-button type="primary" size="small" @click="processPardon(pardon, 'approve')"> 批准 </a-button>
                  <a-button type="default" size="small" @click="processPardon(pardon, 'reject')"> 驳回 </a-button>
                </div>
              </div>
            </div>
          </div>

          <!-- 刑期减免规则 -->
          <div class="section-wrapper">
            <div class="section-header">
              <h3 class="section-title">
                <BookOutlined class="section-icon" />
                刑期减免规则
              </h3>
              <a-button type="link" @click="editReductionRules">编辑规则</a-button>
            </div>

            <div class="reduction-rules">
              <div v-for="rule in reductionRules" :key="rule.id" class="rule-item">
                <div class="rule-header">
                  <div class="rule-name">{{ rule.name }}</div>
                  <a-switch v-model:checked="rule.enabled" size="small" />
                </div>
                <div class="rule-description">{{ rule.description }}</div>
                <div class="rule-conditions">
                  <div class="condition-item">
                    <span class="condition-label">减免比例:</span>
                    <span class="condition-value">{{ rule.reductionRate }}%</span>
                  </div>
                  <div class="condition-item">
                    <span class="condition-label">最低刑期:</span>
                    <span class="condition-value">{{ rule.minDuration }}天</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 执行区域状态 -->
          <div class="section-wrapper">
            <div class="section-header">
              <h3 class="section-title">
                <EnvironmentOutlined class="section-icon" />
                执行区域状态
              </h3>
            </div>

            <div class="execution-areas">
              <div v-for="area in executionAreas" :key="area.id" class="area-item">
                <div class="area-header">
                  <div class="area-name">{{ area.name }}</div>
                  <div class="area-capacity">{{ area.currentCount }} / {{ area.maxCapacity }}</div>
                </div>
                <div class="area-progress">
                  <a-progress :percent="area.occupancyRate" :strokeColor="getOccupancyColor(area.occupancyRate)" size="small" :showInfo="false" />
                </div>
                <div class="area-types">
                  {{ area.punishmentTypes.join('、') }}
                </div>
              </div>
            </div>
          </div>

          <!-- 执行效果评估 -->
          <div class="section-wrapper">
            <div class="section-header">
              <h3 class="section-title">
                <TrophyOutlined class="section-icon" />
                执行效果评估
              </h3>
            </div>

            <div class="effectiveness-stats">
              <div class="effectiveness-item">
                <div class="effectiveness-label">改造成功率</div>
                <div class="effectiveness-value">{{ effectiveness.reformSuccessRate }}%</div>
              </div>
              <div class="effectiveness-item">
                <div class="effectiveness-label">再犯率</div>
                <div class="effectiveness-value warning">{{ effectiveness.recidivismRate }}%</div>
              </div>
              <div class="effectiveness-item">
                <div class="effectiveness-label">特赦批准率</div>
                <div class="effectiveness-value">{{ effectiveness.pardonApprovalRate }}%</div>
              </div>
              <div class="effectiveness-item">
                <div class="effectiveness-label">平均执行时长</div>
                <div class="effectiveness-value">{{ effectiveness.avgExecutionDays }}天</div>
              </div>
            </div>
          </div>

          <!-- 监控预警 -->
          <div class="section-wrapper">
            <div class="section-header">
              <h3 class="section-title">
                <ExclamationCircleOutlined class="section-icon" />
                监控预警
              </h3>
            </div>

            <div class="warning-list">
              <div v-for="warning in warnings" :key="warning.id" class="warning-item" :class="warning.level">
                <div class="warning-icon">
                  <ExclamationCircleOutlined v-if="warning.level === 'high'" />
                  <InfoCircleOutlined v-else />
                </div>
                <div class="warning-content">
                  <div class="warning-title">{{ warning.title }}</div>
                  <div class="warning-description">{{ warning.description }}</div>
                  <div class="warning-time">{{ warning.time }}</div>
                </div>
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <!-- 刑罚配置弹窗 -->
    <a-modal v-model:open="punishmentConfigVisible" title="刑罚配置管理" width="1200px" @ok="handlePunishmentConfig">
      <a-tabs>
        <a-tab-pane key="types" tab="刑罚类型">
          <div class="config-punishment-types">
            <div class="types-header">
              <h4>刑罚类型配置</h4>
              <a-button type="primary" @click="showAddTypeModal">
                <PlusOutlined />
                添加类型
              </a-button>
            </div>

            <a-table :dataSource="punishmentTypes" :columns="typeConfigColumns" :pagination="{ pageSize: 8 }" :scroll="{ y: 400 }">
              <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'severity'">
                  <a-tag :color="getSeverityColor(record.severity)">
                    {{ record.level }}
                  </a-tag>
                </template>
                <template v-if="column.key === 'targetCrimes'">
                  <span>{{ record.targetCrimes.join(', ') }}</span>
                </template>
                <template v-if="column.key === 'successRate'">
                  <a-progress :percent="record.successRate" size="small" />
                </template>
                <template v-if="column.key === 'action'">
                  <a-button type="link" size="small" @click="editPunishmentType(record)">编辑</a-button>
                  <a-button type="link" size="small" @click="viewTypeDetails(record)">详情</a-button>
                  <a-button type="link" size="small" @click="deletePunishmentType(record)" danger>删除</a-button>
                </template>
              </template>
            </a-table>
          </div>
        </a-tab-pane>

        <a-tab-pane key="rules" tab="执行规则">
          <div class="config-execution-rules">
            <h4>刑罚执行规则配置</h4>
            <a-form layout="vertical">
              <a-row :gutter="16">
                <a-col :span="8">
                  <a-form-item label="最大同时执行数">
                    <a-input-number v-model:value="executionConfig.maxConcurrent" :min="1" :max="1000" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="默认执行周期(天)">
                    <a-input-number v-model:value="executionConfig.defaultCycle" :min="1" :max="3650" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="监控频率(小时)">
                    <a-input-number v-model:value="executionConfig.monitorFreq" :min="1" :max="24" />
                  </a-form-item>
                </a-col>
              </a-row>

              <a-form-item label="自动化设置">
                <a-checkbox-group v-model:value="executionConfig.automation">
                  <a-checkbox value="autoAssign">自动分配执行区域</a-checkbox>
                  <a-checkbox value="autoEvaluate">自动进行效果评估</a-checkbox>
                  <a-checkbox value="autoWarning">自动预警系统</a-checkbox>
                  <a-checkbox value="autoPardon">自动特赦审核</a-checkbox>
                </a-checkbox-group>
              </a-form-item>

              <a-form-item label="刑罚强度等级">
                <a-table :dataSource="severityLevels" :columns="severityColumns" :pagination="false" size="small">
                  <template #bodyCell="{ column, record }">
                    <template v-if="column.key === 'minDays'">
                      <a-input-number v-model:value="record.minDays" :min="1" size="small" />
                    </template>
                    <template v-if="column.key === 'maxDays'">
                      <a-input-number v-model:value="record.maxDays" :min="1" size="small" />
                    </template>
                    <template v-if="column.key === 'cost'">
                      <a-input-number v-model:value="record.cost" :min="1" size="small" />
                    </template>
                  </template>
                </a-table>
              </a-form-item>
            </a-form>
          </div>
        </a-tab-pane>

        <a-tab-pane key="areas" tab="执行区域">
          <div class="config-execution-areas">
            <h4>执行区域管理</h4>
            <a-row :gutter="16">
              <a-col :span="16">
                <a-table :dataSource="executionAreas" :columns="areaConfigColumns" :pagination="false">
                  <template #bodyCell="{ column, record }">
                    <template v-if="column.key === 'occupancy'">
                      <a-progress :percent="record.occupancyRate" :strokeColor="getOccupancyColor(record.occupancyRate)" size="small" />
                    </template>
                    <template v-if="column.key === 'capacity'">
                      <a-input-number v-model:value="record.maxCapacity" :min="1" :max="500" size="small" />
                    </template>
                    <template v-if="column.key === 'action'">
                      <a-button type="link" size="small" @click="editArea(record)">编辑</a-button>
                      <a-button type="link" size="small" @click="viewAreaDetail(record)">详情</a-button>
                    </template>
                  </template>
                </a-table>
              </a-col>
              <a-col :span="8">
                <div class="area-stats">
                  <h5>区域统计</h5>
                  <div class="stat-item">
                    <span>总容量:</span>
                    <span>{{ totalCapacity }}</span>
                  </div>
                  <div class="stat-item">
                    <span>已使用:</span>
                    <span>{{ totalUsed }}</span>
                  </div>
                  <div class="stat-item">
                    <span>使用率:</span>
                    <span>{{ Math.round((totalUsed / totalCapacity) * 100) }}%</span>
                  </div>
                </div>
              </a-col>
            </a-row>
          </div>
        </a-tab-pane>
      </a-tabs>
    </a-modal>

    <!-- 添加刑罚类型弹窗 -->
    <a-modal v-model:open="addTypeVisible" title="添加刑罚类型" @ok="handleAddType" @cancel="resetAddTypeForm">
      <a-form :model="addTypeForm" layout="vertical">
        <a-form-item label="刑罚名称" required>
          <a-input v-model:value="addTypeForm.name" placeholder="请输入刑罚名称" />
        </a-form-item>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="刑罚等级" required>
              <a-select v-model:value="addTypeForm.level">
                <a-select-option value="轻刑">轻刑</a-select-option>
                <a-select-option value="中刑">中刑</a-select-option>
                <a-select-option value="重刑">重刑</a-select-option>
                <a-select-option value="极刑">极刑</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="平均刑期(天)" required>
              <a-input-number v-model:value="addTypeForm.duration" :min="1" :max="3650" style="width: 100%" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-form-item label="刑罚描述" required>
          <a-textarea v-model:value="addTypeForm.description" :rows="3" placeholder="请输入刑罚描述" />
        </a-form-item>
        <a-form-item label="适用罪名">
          <a-select v-model:value="addTypeForm.targetCrimes" mode="multiple" placeholder="选择适用罪名">
            <a-select-option value="杀人">杀人</a-select-option>
            <a-select-option value="纵火">纵火</a-select-option>
            <a-select-option value="盗窃">盗窃</a-select-option>
            <a-select-option value="欺诈">欺诈</a-select-option>
            <a-select-option value="诽谤">诽谤</a-select-option>
            <a-select-option value="虐待">虐待</a-select-option>
            <a-select-option value="背叛">背叛</a-select-option>
            <a-select-option value="谎言">谎言</a-select-option>
          </a-select>
        </a-form-item>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="所需设备">
              <a-input v-model:value="addTypeForm.equipment" placeholder="请输入所需设备" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="执行成本">
              <a-input-number v-model:value="addTypeForm.cost" :min="1" style="width: 100%" placeholder="执行成本" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-form-item label="监督者">
          <a-input v-model:value="addTypeForm.supervisor" placeholder="请输入监督者名称" />
        </a-form-item>
      </a-form>
    </a-modal>

    <!-- 刑罚类型详情弹窗 -->
    <a-modal v-model:open="typeDetailVisible" title="刑罚类型详情" width="800px" :footer="null" v-if="currentType">
      <div class="type-detail-content">
        <a-descriptions :column="2" bordered>
          <a-descriptions-item label="刑罚名称">{{ currentType.name }}</a-descriptions-item>
          <a-descriptions-item label="刑罚等级">
            <a-tag :color="getSeverityColor(currentType.severity)">{{ currentType.level }}</a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="平均刑期">{{ currentType.avgDuration }}</a-descriptions-item>
          <a-descriptions-item label="执行成本">{{ currentType.cost || 'N/A' }} 冥币</a-descriptions-item>
          <a-descriptions-item label="成功率">
            <a-progress :percent="currentType.successRate || 85" size="small" />
          </a-descriptions-item>
          <a-descriptions-item label="监督者">{{ currentType.supervisor || 'N/A' }}</a-descriptions-item>
          <a-descriptions-item label="刑罚描述" :span="2">{{ currentType.description }}</a-descriptions-item>
          <a-descriptions-item label="适用罪名" :span="2">
            <a-tag v-for="crime in currentType.targetCrimes || []" :key="crime" style="margin: 2px">
              {{ crime }}
            </a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="所需设备" :span="2">{{ currentType.equipment || 'N/A' }}</a-descriptions-item>
        </a-descriptions>

        <div class="execution-statistics" style="margin-top: 20px">
          <h4>执行统计</h4>
          <a-row :gutter="16">
            <a-col :span="8">
              <a-statistic title="正在执行" :value="currentType.executing" suffix="人" />
            </a-col>
            <a-col :span="8">
              <a-statistic title="已完成" :value="currentType.completed" suffix="人" />
            </a-col>
            <a-col :span="8">
              <a-statistic title="成功率" :value="currentType.successRate || 85" suffix="%" />
            </a-col>
          </a-row>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { SettingOutlined, GiftOutlined, ThunderboltOutlined, BarChartOutlined, EyeOutlined, EditOutlined, BookOutlined, EnvironmentOutlined, TrophyOutlined, ExclamationCircleOutlined, InfoCircleOutlined, PlusOutlined } from '@ant-design/icons-vue'

// 路由
const router = useRouter()
const route = useRoute()

// 响应式数据
const progressFilter = ref('')

// 统计数据
const stats = ref({
  executing: 45,
  completed: 234,
  pardoned: 12,
  pending: 28
})

// 刑罚类型数据
const punishmentTypes = ref([
  {
    id: 1,
    name: '地狱刑罚',
    level: '重刑',
    severity: 'severe',
    description: '针对重大罪行的严厉刑罚，在十八层地狱中执行',
    executing: 25,
    completed: 89,
    avgDuration: '365天',
    targetCrimes: ['杀人', '纵火', '谋反'],
    equipment: '地狱火池、刑具',
    supervisor: '地狱判官',
    cost: 1500,
    successRate: 95
  },
  {
    id: 2,
    name: '苦役刑罚',
    level: '中刑',
    severity: 'moderate',
    description: '通过劳动改造的方式净化罪孽',
    executing: 35,
    completed: 156,
    avgDuration: '180天',
    targetCrimes: ['盗窃', '欺诈', '贪污'],
    equipment: '劳作工具、监督器',
    supervisor: '劳改官',
    cost: 500,
    successRate: 78
  },
  {
    id: 3,
    name: '净化刑罚',
    level: '轻刑',
    severity: 'light',
    description: '通过精神净化消除恶念',
    executing: 18,
    completed: 234,
    avgDuration: '90天',
    targetCrimes: ['谎言', '小过', '轻微伤害'],
    equipment: '净化池、洗心符',
    supervisor: '净化使者',
    cost: 200,
    successRate: 85
  },
  {
    id: 4,
    name: '禁锢刑罚',
    level: '中刑',
    severity: 'moderate',
    description: '限制行动自由的惩罚措施',
    executing: 12,
    completed: 67,
    avgDuration: '120天',
    targetCrimes: ['暴力', '威胁', '恐吓'],
    equipment: '禁锢锁链、牢笼',
    supervisor: '狱卒长',
    cost: 350,
    successRate: 82
  },
  {
    id: 5,
    name: '刀山剑树',
    level: '极刑',
    severity: 'extreme',
    description: '攀爬刀山剑树，体验极致痛苦',
    executing: 8,
    completed: 23,
    avgDuration: '1095天',
    targetCrimes: ['大屠杀', '灭门', '反人类'],
    equipment: '刀山阵、剑树林',
    supervisor: '刀山判官',
    cost: 2500,
    successRate: 98
  },
  {
    id: 6,
    name: '油锅地狱',
    level: '重刑',
    severity: 'severe',
    description: '在滚烫油锅中受刑，洗净罪恶',
    executing: 15,
    completed: 45,
    avgDuration: '730天',
    targetCrimes: ['虐待', '残害', '酷刑'],
    equipment: '油锅、铁叉',
    supervisor: '油鬼判官',
    cost: 1200,
    successRate: 91
  },
  {
    id: 7,
    name: '寒冰地狱',
    level: '重刑',
    severity: 'severe',
    description: '在极寒环境中反思罪过',
    executing: 11,
    completed: 34,
    avgDuration: '548天',
    targetCrimes: ['背叛', '无情', '绝情'],
    equipment: '寒冰牢、冰锁',
    supervisor: '冰魄鬼王',
    cost: 980,
    successRate: 88
  },
  {
    id: 8,
    name: '拔舌地狱',
    level: '中刑',
    severity: 'moderate',
    description: '拔除恶舌，制止妄语诽谤',
    executing: 7,
    completed: 56,
    avgDuration: '240天',
    targetCrimes: ['诽谤', '造谣', '传谣'],
    equipment: '拔舌钳、封口符',
    supervisor: '舌判官',
    cost: 650,
    successRate: 96
  },
  {
    id: 9,
    name: '针刺地狱',
    level: '中刑',
    severity: 'moderate',
    description: '千针万刺，体验被害者痛苦',
    executing: 9,
    completed: 78,
    avgDuration: '300天',
    targetCrimes: ['折磨', '凌虐', '虐待'],
    equipment: '针刺台、千针阵',
    supervisor: '针鬼使者',
    cost: 580,
    successRate: 87
  },
  {
    id: 10,
    name: '血池地狱',
    level: '极刑',
    severity: 'extreme',
    description: '在血海中洗净血债',
    executing: 3,
    completed: 12,
    avgDuration: '1460天',
    targetCrimes: ['战争罪', '种族灭绝', '大屠杀'],
    equipment: '血池、血链',
    supervisor: '血海判官',
    cost: 3000,
    successRate: 99
  },
  {
    id: 11,
    name: '忏悔修行',
    level: '轻刑',
    severity: 'light',
    description: '通过诵经忏悔洗涤心灵',
    executing: 28,
    completed: 345,
    avgDuration: '60天',
    targetCrimes: ['轻过', '失误', '无意伤害'],
    equipment: '经书、蒲团、香炉',
    supervisor: '文殊菩萨',
    cost: 150,
    successRate: 75
  },
  {
    id: 12,
    name: '镜照地狱',
    level: '中刑',
    severity: 'moderate',
    description: '业镜照心，直视内心真相',
    executing: 14,
    completed: 89,
    avgDuration: '210天',
    targetCrimes: ['自欺', '虚伪', '欺骗'],
    equipment: '业力镜、真相台',
    supervisor: '明镜判官',
    cost: 420,
    successRate: 82
  }
])

// 执行进度数据
const executions = ref([
  {
    id: 1,
    prisonerName: '张三',
    caseNumber: 'YF-2023-001',
    punishmentType: '地狱刑罚',
    location: '第十八层地狱',
    status: 'executing',
    statusText: '执行中',
    completedDays: 89,
    totalDays: 365,
    progressPercent: 24,
    startDate: '2023-11-01',
    estimatedEnd: '2024-10-31',
    canPardon: true
  },
  {
    id: 2,
    prisonerName: '李四',
    caseNumber: 'YF-2023-002',
    punishmentType: '苦役刑罚',
    location: '劳改营',
    status: 'executing',
    statusText: '执行中',
    completedDays: 145,
    totalDays: 180,
    progressPercent: 81,
    startDate: '2023-07-15',
    estimatedEnd: '2024-01-12',
    canPardon: false
  },
  {
    id: 3,
    prisonerName: '王五',
    caseNumber: 'YF-2023-003',
    punishmentType: '净化刑罚',
    location: '净化池',
    status: 'suspended',
    statusText: '暂停执行',
    completedDays: 45,
    totalDays: 90,
    progressPercent: 50,
    startDate: '2023-10-01',
    estimatedEnd: '2023-12-30',
    canPardon: true
  }
])

// 特赦申请数据
const pardonApplications = ref([
  {
    id: 1,
    applicantName: '张三',
    reason: '认罪态度良好，积极改造',
    pardonType: '减刑特赦',
    applicationDate: '2023-12-10',
    status: '待审批'
  },
  {
    id: 2,
    applicantName: '王五',
    reason: '发现新证据，证明罪责较轻',
    pardonType: '免罚特赦',
    applicationDate: '2023-12-12',
    status: '审理中'
  }
])

// 减免规则数据
const reductionRules = ref([
  {
    id: 1,
    name: '良好表现减刑',
    description: '在执行期间表现良好可获得减刑',
    reductionRate: 20,
    minDuration: 30,
    enabled: true
  },
  {
    id: 2,
    name: '立功减刑',
    description: '举报他人罪行或协助调查可获得减刑',
    reductionRate: 30,
    minDuration: 15,
    enabled: true
  },
  {
    id: 3,
    name: '忏悔减刑',
    description: '真心忏悔并愿意补偿受害者',
    reductionRate: 15,
    minDuration: 45,
    enabled: false
  }
])

// 执行区域数据
const executionAreas = ref([
  {
    id: 1,
    name: '第一层地狱',
    currentCount: 25,
    maxCapacity: 50,
    occupancyRate: 50,
    punishmentTypes: ['轻罪刑罚', '净化刑罚']
  },
  {
    id: 2,
    name: '第十八层地狱',
    currentCount: 45,
    maxCapacity: 50,
    occupancyRate: 90,
    punishmentTypes: ['重罪刑罚', '地狱刑罚']
  },
  {
    id: 3,
    name: '劳改营',
    currentCount: 78,
    maxCapacity: 100,
    occupancyRate: 78,
    punishmentTypes: ['苦役刑罚', '劳动改造']
  }
])

// 执行效果评估
const effectiveness = ref({
  reformSuccessRate: 87.5,
  recidivismRate: 8.2,
  pardonApprovalRate: 15.6,
  avgExecutionDays: 156
})

// 监控预警
const warnings = ref([
  {
    id: 1,
    title: '第十八层地狱容量告急',
    description: '当前容量已达90%，建议及时调配',
    level: 'high',
    time: '5分钟前'
  },
  {
    id: 2,
    title: '特赦申请积压',
    description: '有2件特赦申请待处理',
    level: 'medium',
    time: '1小时前'
  }
])

// 计算属性
const filteredExecutions = computed(() => {
  if (!progressFilter.value) return executions.value
  return executions.value.filter((exec) => exec.status === progressFilter.value)
})

// 方法
const getExecutionStatusColor = (status) => {
  const colors = {
    executing: 'blue',
    suspended: 'orange',
    completed: 'green'
  }
  return colors[status] || 'default'
}

const getProgressColor = (percent) => {
  if (percent >= 80) return '#52c41a'
  if (percent >= 50) return '#faad14'
  return '#ff4d4f'
}

const getPardonStatusColor = (status) => {
  const colors = {
    待审批: 'orange',
    审理中: 'blue',
    已批准: 'green',
    已驳回: 'red'
  }
  return colors[status] || 'default'
}

const getOccupancyColor = (rate) => {
  if (rate >= 90) return '#ff4d4f'
  if (rate >= 70) return '#faad14'
  return '#52c41a'
}

// 弹窗状态
const punishmentConfigVisible = ref(false)
const addTypeVisible = ref(false)
const typeDetailVisible = ref(false)
const currentType = ref(null)

// 执行配置
const executionConfig = ref({
  maxConcurrent: 200,
  defaultCycle: 365,
  monitorFreq: 6,
  automation: ['autoAssign', 'autoWarning']
})

// 强度等级配置
const severityLevels = ref([
  { level: '轻刑', minDays: 30, maxDays: 180, cost: 100 },
  { level: '中刑', minDays: 180, maxDays: 730, cost: 500 },
  { level: '重刑', minDays: 730, maxDays: 1825, cost: 1200 },
  { level: '极刑', minDays: 1825, maxDays: 3650, cost: 2500 }
])

// 添加类型表单
const addTypeForm = ref({
  name: '',
  level: '',
  duration: null,
  description: '',
  targetCrimes: [],
  equipment: '',
  cost: null,
  supervisor: ''
})

// 表格列配置
const typeConfigColumns = [
  { title: '刑罚名称', dataIndex: 'name', key: 'name', width: 120 },
  { title: '等级', key: 'severity', width: 80 },
  { title: '刑期', dataIndex: 'avgDuration', key: 'avgDuration', width: 100 },
  { title: '适用罪名', key: 'targetCrimes', width: 150 },
  { title: '成功率', key: 'successRate', width: 100 },
  { title: '执行成本', dataIndex: 'cost', key: 'cost', width: 100 },
  { title: '操作', key: 'action', width: 150 }
]

const severityColumns = [
  { title: '等级', dataIndex: 'level', key: 'level' },
  { title: '最少天数', key: 'minDays' },
  { title: '最多天数', key: 'maxDays' },
  { title: '基础成本', key: 'cost' }
]

const areaConfigColumns = [
  { title: '区域名称', dataIndex: 'name', key: 'name' },
  { title: '当前人数', dataIndex: 'currentCount', key: 'currentCount' },
  { title: '使用率', key: 'occupancy' },
  { title: '最大容量', key: 'capacity' },
  { title: '操作', key: 'action' }
]

// 计算属性
const totalCapacity = computed(() => {
  return executionAreas.value.reduce((total, area) => total + area.maxCapacity, 0)
})

const totalUsed = computed(() => {
  return executionAreas.value.reduce((total, area) => total + area.currentCount, 0)
})

const showPunishmentConfig = () => {
  punishmentConfigVisible.value = true
}

const showPardonManagement = () => {
  console.log('显示特赦管理')
}

const addPunishmentType = () => {
  addTypeVisible.value = true
}

const editPunishmentType = (type) => {
  currentType.value = { ...type }
  addTypeForm.value = {
    name: type.name,
    level: type.level,
    duration: parseInt(type.avgDuration),
    description: type.description,
    targetCrimes: type.targetCrimes || [],
    equipment: type.equipment || '',
    cost: type.cost || null,
    supervisor: type.supervisor || ''
  }
  addTypeVisible.value = true
}

const viewTypeDetails = (type) => {
  currentType.value = type
  typeDetailVisible.value = true
}

const deletePunishmentType = (type) => {
  const index = punishmentTypes.value.findIndex((t) => t.id === type.id)
  if (index > -1) {
    punishmentTypes.value.splice(index, 1)
  }
}

const viewExecutionDetail = (execution) => {
  console.log('查看执行详情', execution)
}

const adjustExecution = (execution) => {
  console.log('调整刑期', execution)
}

const applyPardon = (execution) => {
  console.log('申请特赦', execution)
}

const processPardon = (pardon, action) => {
  console.log('处理特赦申请', pardon, action)
}

const editReductionRules = () => {
  console.log('编辑减免规则')
}

// 弹窗处理方法
const handlePunishmentConfig = () => {
  punishmentConfigVisible.value = false
}

const showAddTypeModal = () => {
  addTypeVisible.value = true
}

const handleAddType = () => {
  const newType = {
    id: punishmentTypes.value.length + 1,
    name: addTypeForm.value.name,
    level: addTypeForm.value.level,
    severity: getSeverityLevel(addTypeForm.value.level),
    description: addTypeForm.value.description,
    executing: 0,
    completed: 0,
    avgDuration: `${addTypeForm.value.duration}天`,
    targetCrimes: addTypeForm.value.targetCrimes,
    equipment: addTypeForm.value.equipment,
    cost: addTypeForm.value.cost,
    supervisor: addTypeForm.value.supervisor,
    successRate: 85
  }

  if (currentType.value) {
    // 编辑模式
    const index = punishmentTypes.value.findIndex((t) => t.id === currentType.value.id)
    if (index > -1) {
      punishmentTypes.value[index] = { ...punishmentTypes.value[index], ...newType, id: currentType.value.id }
    }
    currentType.value = null
  } else {
    // 新增模式
    punishmentTypes.value.push(newType)
  }

  resetAddTypeForm()
}

const resetAddTypeForm = () => {
  addTypeForm.value = {
    name: '',
    level: '',
    duration: null,
    description: '',
    targetCrimes: [],
    equipment: '',
    cost: null,
    supervisor: ''
  }
  addTypeVisible.value = false
  currentType.value = null
}

const getSeverityLevel = (level) => {
  const map = {
    轻刑: 'light',
    中刑: 'moderate',
    重刑: 'severe',
    极刑: 'extreme'
  }
  return map[level] || 'light'
}

const getSeverityColor = (severity) => {
  const colors = {
    light: 'green',
    moderate: 'orange',
    severe: 'red',
    extreme: 'purple'
  }
  return colors[severity] || 'default'
}

const editArea = (area) => {
  console.log('编辑区域', area)
}

const viewAreaDetail = (area) => {
  console.log('查看区域详情', area)
}

// 生命周期
onMounted(() => {
  console.log('刑罚执行系统页面已加载')
})
</script>

<style lang="scss" scoped>
.punishment-execution {
  padding: 0;

  // 面包屑导航
  .breadcrumb-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding: 16px 24px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;

    .current-route {
      font-size: 12px;
      color: $text-tertiary;
      background: rgba(255, 255, 255, 0.1);
      padding: 4px 8px;
      border-radius: 4px;
    }
  }

  // 页面头部
  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 32px;

    .header-content {
      .page-title {
        font-size: 28px;
        font-weight: bold;
        color: $text-primary;
        margin-bottom: 8px;
      }

      .page-subtitle {
        font-size: 14px;
        color: $text-secondary;
        letter-spacing: 1px;
      }
    }

    .header-actions {
      display: flex;
      gap: 12px;
    }
  }

  // 统计卡片
  .stats-section {
    margin-bottom: 32px;

    .stat-card {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 12px;
      padding: 20px;
      text-align: center;
      backdrop-filter: blur(10px);

      &.executing {
        border-color: rgba(24, 144, 255, 0.3);
      }

      &.completed {
        border-color: rgba(82, 196, 26, 0.3);
      }

      &.pardoned {
        border-color: rgba(245, 173, 46, 0.3);
      }

      &.pending {
        border-color: rgba(245, 84, 28, 0.3);
      }

      .stat-icon {
        font-size: 24px;
        margin-bottom: 8px;
      }

      .stat-value {
        font-size: 24px;
        font-weight: bold;
        color: $text-primary;
        margin-bottom: 4px;
      }

      .stat-label {
        font-size: 12px;
        color: $text-secondary;
      }
    }
  }

  // 主要内容区域
  .main-content {
    .section-wrapper {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 16px;
      padding: 24px;
      margin-bottom: 24px;

      .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        padding-bottom: 16px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);

        .section-title {
          display: flex;
          align-items: center;
          font-size: 18px;
          font-weight: 600;
          color: $text-primary;
          margin: 0;

          .section-icon {
            font-size: 20px;
            margin-right: 12px;
            color: $primary-color;
          }
        }

        .filter-controls {
          display: flex;
          gap: 12px;
        }
      }
    }

    // 刑罚类型卡片
    .punishment-types {
      .type-card {
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 12px;
        padding: 16px;
        height: 100%;
        transition: all 0.3s ease;

        &:hover {
          background: rgba(255, 255, 255, 0.12);
        }

        &.severe {
          border-color: rgba(255, 77, 79, 0.5);
        }

        &.moderate {
          border-color: rgba(245, 173, 46, 0.5);
        }

        &.light {
          border-color: rgba(82, 196, 26, 0.5);
        }

        .type-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 12px;

          .type-name {
            font-size: 16px;
            font-weight: 600;
            color: $text-primary;
          }

          .type-level {
            font-size: 12px;
            color: $text-secondary;
            background: rgba(255, 255, 255, 0.1);
            padding: 2px 6px;
            border-radius: 3px;
          }
        }

        .type-description {
          font-size: 13px;
          color: $text-secondary;
          margin-bottom: 12px;
          line-height: 1.4;
        }

        .type-stats {
          margin-bottom: 12px;

          .stat-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 4px;
            font-size: 12px;

            span {
              color: $text-tertiary;
            }
          }
        }

        .type-actions {
          display: flex;
          gap: 8px;
        }
      }
    }

    // 执行进度列表
    .execution-list {
      .execution-item {
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        padding: 16px;
        margin-bottom: 16px;

        &:last-child {
          margin-bottom: 0;
        }

        .execution-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 12px;

          .execution-info {
            .prisoner-name {
              font-size: 16px;
              font-weight: 600;
              color: $text-primary;
              margin-bottom: 4px;
            }

            .case-number {
              font-size: 12px;
              color: $text-tertiary;
            }
          }
        }

        .execution-details {
          margin-bottom: 16px;

          .punishment-info {
            display: flex;
            gap: 16px;
            margin-bottom: 8px;
            font-size: 13px;

            .punishment-type {
              color: $text-primary;
              font-weight: 500;
            }

            .punishment-location {
              color: $text-secondary;
            }
          }

          .progress-info {
            margin-bottom: 8px;

            .progress-text {
              font-size: 12px;
              color: $text-secondary;
              margin-bottom: 4px;
            }
          }

          .time-info {
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            color: $text-tertiary;
          }
        }

        .execution-actions {
          display: flex;
          gap: 8px;
        }
      }
    }

    // 特赦申请列表
    .pardon-list {
      .pardon-item {
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        padding: 16px;
        margin-bottom: 12px;

        &:last-child {
          margin-bottom: 0;
        }

        .pardon-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 12px;

          .pardon-applicant {
            font-size: 14px;
            font-weight: 600;
            color: $text-primary;
          }
        }

        .pardon-content {
          margin-bottom: 12px;

          .pardon-reason,
          .pardon-type,
          .pardon-date {
            font-size: 12px;
            margin-bottom: 4px;
          }

          .pardon-reason {
            color: $text-primary;
            line-height: 1.4;
          }

          .pardon-type,
          .pardon-date {
            color: $text-secondary;
          }
        }

        .pardon-actions {
          display: flex;
          gap: 8px;
        }
      }
    }

    // 减免规则
    .reduction-rules {
      .rule-item {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        padding: 16px;
        margin-bottom: 12px;

        &:last-child {
          margin-bottom: 0;
        }

        .rule-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 8px;

          .rule-name {
            font-size: 14px;
            font-weight: 600;
            color: $text-primary;
          }
        }

        .rule-description {
          font-size: 12px;
          color: $text-secondary;
          margin-bottom: 8px;
          line-height: 1.4;
        }

        .rule-conditions {
          .condition-item {
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            margin-bottom: 4px;

            .condition-label {
              color: $text-secondary;
            }

            .condition-value {
              color: $text-primary;
              font-weight: 500;
            }
          }
        }
      }
    }

    // 执行区域
    .execution-areas {
      .area-item {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        padding: 16px;
        margin-bottom: 12px;

        &:last-child {
          margin-bottom: 0;
        }

        .area-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 8px;

          .area-name {
            font-size: 14px;
            font-weight: 600;
            color: $text-primary;
          }

          .area-capacity {
            font-size: 12px;
            color: $text-secondary;
          }
        }

        .area-progress {
          margin-bottom: 8px;
        }

        .area-types {
          font-size: 12px;
          color: $text-tertiary;
        }
      }
    }

    // 执行效果统计
    .effectiveness-stats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;

      .effectiveness-item {
        text-align: center;
        padding: 12px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 8px;

        .effectiveness-label {
          font-size: 12px;
          color: $text-secondary;
          margin-bottom: 6px;
        }

        .effectiveness-value {
          font-size: 16px;
          font-weight: 600;
          color: $text-primary;

          &.warning {
            color: #fa8c16;
          }
        }
      }
    }

    // 监控预警
    .warning-list {
      .warning-item {
        display: flex;
        align-items: flex-start;
        padding: 12px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 8px;
        margin-bottom: 8px;

        &:last-child {
          margin-bottom: 0;
        }

        &.high {
          border-left: 3px solid #ff4d4f;
        }

        &.medium {
          border-left: 3px solid #faad14;
        }

        .warning-icon {
          margin-right: 12px;
          margin-top: 2px;
          color: #fa8c16;
        }

        .warning-content {
          flex: 1;

          .warning-title {
            font-size: 13px;
            font-weight: 500;
            color: $text-primary;
            margin-bottom: 4px;
          }

          .warning-description {
            font-size: 12px;
            color: $text-secondary;
            margin-bottom: 4px;
            line-height: 1.4;
          }

          .warning-time {
            font-size: 11px;
            color: $text-tertiary;
          }
        }
      }
    }
  }
}

// 响应式适配
@media (max-width: 768px) {
  .punishment-execution {
    .breadcrumb-nav {
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
    }

    .page-header {
      flex-direction: column;
      gap: 16px;

      .header-actions {
        width: 100%;
        justify-content: stretch;

        .ant-btn {
          flex: 1;
        }
      }
    }

    .effectiveness-stats {
      grid-template-columns: 1fr;
    }

    .execution-item {
      .execution-details {
        .punishment-info {
          flex-direction: column;
          gap: 4px;
        }

        .time-info {
          flex-direction: column;
          gap: 4px;
        }
      }

      .execution-actions {
        flex-wrap: wrap;
      }
    }
  }

  // 弹窗相关样式
  :deep(.ant-modal) {
    .ant-modal-content {
      background: rgba(20, 20, 30, 0.95);
      border: 1px solid rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(10px);
    }

    .ant-modal-header {
      background: rgba(255, 255, 255, 0.05);
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);

      .ant-modal-title {
        color: $text-primary;
      }
    }

    .ant-modal-body {
      color: $text-primary;
    }
  }

  .config-punishment-types {
    .types-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;

      h4 {
        color: $text-primary;
        margin: 0;
      }
    }
  }

  .area-stats {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 16px;

    h5 {
      color: $text-primary;
      margin-bottom: 12px;
    }

    .stat-item {
      display: flex;
      justify-content: space-between;
      margin-bottom: 8px;

      span:first-child {
        color: $text-secondary;
      }

      span:last-child {
        color: $text-primary;
        font-weight: 600;
      }
    }
  }

  .type-detail-content {
    h4 {
      color: $text-primary;
      margin-bottom: 16px;
    }
  }

  :deep(.ant-descriptions) {
    .ant-descriptions-header {
      background: rgba(255, 255, 255, 0.05);
    }

    .ant-descriptions-item-label {
      color: $text-secondary;
      background: rgba(255, 255, 255, 0.05);
    }

    .ant-descriptions-item-content {
      color: $text-primary;
    }
  }

  :deep(.ant-form-item-label > label) {
    color: $text-primary;
  }

  :deep(.ant-input),
  :deep(.ant-input-number),
  :deep(.ant-select-selector),
  :deep(.ant-textarea),
  :deep(.ant-checkbox-wrapper) {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
    color: $text-primary;

    &:hover {
      border-color: $primary-color;
    }

    &:focus {
      border-color: $primary-color;
      box-shadow: 0 0 0 2px rgba(114, 46, 209, 0.2);
    }
  }

  :deep(.ant-checkbox-wrapper) {
    color: $text-primary;
  }

  :deep(.ant-select-dropdown) {
    background: rgba(20, 20, 30, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);

    .ant-select-item {
      color: $text-primary;

      &:hover {
        background: rgba(255, 255, 255, 0.1);
      }
    }
  }

  :deep(.ant-table) {
    background: transparent;

    .ant-table-thead > tr > th {
      background: rgba(255, 255, 255, 0.05);
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      color: $text-primary;
    }

    .ant-table-tbody > tr > td {
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
      color: $text-secondary;
    }

    .ant-table-tbody > tr:hover > td {
      background: rgba(255, 255, 255, 0.05);
    }
  }
}
</style>
